﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script type="text/javascript" src="jquery-2.0.3.js"></script>
</head>
<body>


    <div>
        <p>
            <input type="text" />
        </p>
        <div class="clr">
            <input type="checkbox" name="readme" id="readme" />
            <p>Hello World</p>
        </div>
    </div>



    <input type="text" value="123" id="myInput" />


    <table>
        <tbody>
            <tr id="myTr">
                <td>prev</td>
                <td id="td1">1</td>
                <td>2</td>
                <!--123-->
            </tr>
            <tr>
                <td>next</td>
                <td id="td3">3</td>
                <td>4</td>
            </tr>
        </tbody>

    </table>


    <h2>Greetings</h2>
    <div class="container">
        <div class="inner">Hello</div>
        <div class="inner">Goodbye</div>
    </div>



    <span>Span Text</span>
    <strong>What about me?</strong>
    <span>Another One</span>



    <div class="container">
        <div class="inner first">Hello</div>
        <h2>New heading</h2>
        <div class="inner third">Goodbye</div>
    </div>

    <script type="text/javascript">
        $(function () {

            //--------------------------------------插入--------------------------------------
            //1.append
            $(".inner").append("<p>Test</p>");


            //2.prepend
            $(".inner").prepend("<p>Test</p>");

            //3.after
            $(".inner").after("<p>Test</p>");

            //4.before
            $(".inner").before("<p>Test</p>");


            //--------------------------------------包裹--------------------------------------
            //5.wrap
            $(".inner").wrap("<div class='new'></div>");

            //6.unwrap
            $(".inner").unwrap();

            //7.wrapAll
            $("span").wrapAll("<div><div><p><em><b></b></em></p></div></div>");

            //8.wrapInner
            $(".inner").wrapInner("<div class='new'></div>");

            //--------------------------------------文档的替换--------------------------------------
            //9.replaceWith
            $("div.inner").replaceWith("<h2>New heading</h2>");

            //10.replaceAll
            $("<h2>New heading</h2>").replaceAll("div.inner");


            //--------------------------------------文档的删除--------------------------------------
            $(".hello").empty();    //删除子dom节点,不保留jquery数据和事件
            $(".hello").remove();   //删除匹配的元素，不保留jquery数据和事件
            $(".hello").detach();   //删除匹配的元素，保留jquery数据和事件

            //--------------------------------------节点的克隆--------------------------------------
            $(".hello").clone()     //默认不克隆事件和数据 ， 通过参数来控制

            //--------------------------------------节点的内容和问题--------------------------------------
            $(".hello").html("123");
            $(".hello").text("123");

            //参数设置
            $(".container").append($("h2"));                    //dom对象或者jquery对象
            $(".container").append($("h2"), "<p>Test</p>");     //接受多个参数
            $(".inner").wrap(function () {
                return "<div class='" + $(this).text() + "'></div>";
            });

        })






    </script>
</body>
</html>
